<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
    <script type="text/javascript" src="js/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="js/base.js"></script>
</head>
<body>
<table align="center" border="1">
    <caption>注册</caption>
    <tr>
        <td>用户名</td>
        <td><input name="username" type="text"></td>
    </tr>
    <tr>
        <td>密码</td>
        <td><input name="password" type="password"></td>
    </tr>
    <tr>
        <td>昵称</td>
        <td><input name="nickname" type="text"></td>
    </tr>
    <tr>
        <td>年龄</td>
        <td><input name="age" type="text"></td>
    </tr>
    <tr>
        <td>生日</td>
        <td><input name="birthday" type="date"></td>
    </tr>
    <tr>
        <td colspan="2">
            <button id="sub">提交</button>
        </td>
    </tr>
</table>
<script>
    $(function () {
        var urlParam = getUrlParam("username");
        var flag = false
        //将页面数据展示
        if (urlParam != null) {
            flag = true;
            loadUserInfo(urlParam)
        }
        //当点击提交时
        $("#sub").on("click", function () {
            let username = $("input[name=username]").val()
            let password = $("input[name=password]").val()
            let nickname = $("input[name=nickname]").val()
            let age = $("input[name=age]").val()
            let birthday = $("input[name=birthday]").val()
            let data = {username: username, password: password, nickname: nickname, age: age, birthday: birthday}
            //进行ajax提交
            if (flag) {
                modifyUser(data)
            } else {
                addUser(data)
            }
        })
    })
    //编辑
    function modifyUser(data){
        $.ajax({
            url: baseUrl + "/ajax_modify",
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            data: JSON.stringify(data),
            success: function (res) {
                console.log(res)
                if (res.code == 200) {
                    alert("编辑成功")
                    window.location.href="index.jsp"
                } else {
                    alert(res.msg)
                }
            },
            error: function (e) {
                console.log(e)
            }
        })
    }
    //添加
    function addUser(data){
        $.ajax({
            url: baseUrl + "/ajax_register",
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            data: JSON.stringify(data),
            success: function (res) {
                console.log(data)
                if (res.code == 200) {
                    alert("注册成功")
                    window.location.href = "login.jsp"
                } else {
                    alert(data.msg)
                }
            },
            error: function (e) {
                console.log(e)
            }
        })
    }
    function loadUserInfo(username) {
        //进行ajax提交
        $.ajax({
            url: baseUrl + "/ajax_findUserByUserName?username="+username,
            type: "GET",
            success: function (res) {
                console.log(res)
                if (res.code == 200) {
                    //将数据渲染到页面上
                    $("input[name=username]").val(res.data.username)
                    $("input[name=username]").attr("disabled",true)
                    $("input[name=password]").val(res.data.password)
                    $("input[name=nickname]").val(res.data.nickname)
                    $("input[name=age]").val(res.data.age)
                    $("input[name=birthday]").val(timestampToTime(res.data.birthday))
                } else {
                    alert(res.msg)
                }
            },
            error: function (e) {
                console.log(e)
            }
        })
    }


    function timestampToTime(timestamp) {
        var date = new Date(timestamp);
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = date.getDate();
        return Y+M+D;
    }

</script>
</body>
</html>
